import React from 'react';
import { withRouter, Route, Redirect, Switch } from "react-router-dom"

@withRouter
class Compile extends React.Component {
    constructor() {
        super()
        this.state = {
            c: []
        }
    }

    static getDerivedStateFromProps(nextProps) {
        // 存储未登录路由权限
        let c = [];
        let { routers, isChildRoute } = nextProps;
        // console.log(routers);
        let { pathname } = nextProps.location;
        // 找到不需要校验的路由
        let target = routers.find(item => item.path === pathname)
        // 查看当前有无 token
        let token = localStorage.getItem("token");

        // 找到并生成未登录时可以访问的路由
        if (!token) {
            // 筛选auth为false的路由
            c = routers.filter(item => !item.auth);
            // 返回一串内处理成 Route 的路由数组
            c = c.map(item => <Route key={item.path} path={item.path} exact={item.exact} component={item.component} />);
            // 给权限路由数组添加一个重定向
            c.push(<Redirect to="/login" key="redirect1" />)
        } else {
            // 登录状态下可以访问所有路由
            c = routers.map(item => <Route key={item.path} path={item.path} exact={item.exact} component={() => {
                // 返回一级路由并传递多级路由参数
                return <item.component routers={item.children} />
            }} />);

            // 不给子组件重定向404
            if (!isChildRoute) {
                // 没有匹配到则重定向 404 组件
                c.push(<Redirect to="/page404" key="redirect2" />)
            }
        }
        return { c }
    }

    render() {
        return <Switch>{this.state.c}</Switch>
    }
}

export default Compile;